<script setup lang="ts">
  // computed计算属性
  import {computed, ref, onMounted} from 'vue'
  // 定义一个自增id变量
  let id: number = 0;
  type toDoItem = {
      id: number, // id属性
      text: string,
      done: boolean
  }
  // 待办列表
  const todos = ref<toDoItem[]>([]);
  
  // 定义待办和已完成的数量
  let toDoNum = ref(0);
  let doneNum = ref(0);

  // 新加入的待办事项
  const newToDo = ref("");
  // 新增一个待办事项的函数实现
  function addToDoList() {
      console.log(newToDo.value);
      todos.value.push({
          id: id++,
          text: newToDo.value,
          done: false
      });
      newToDo.value = "";
      toDoNum.value++;
      localStorage.setItem('todos', JSON.stringify(todos.value));
      console.log('数据已保存！');
  }
  // 根据id删除todos中的元素
  function removeItem(id: number) {
      const rs = todos.value.filter(item => item.id !== id)
      todos.value = rs;
      toDoNum.value--;
      if (doneNum.value > 0) {
          doneNum.value--;
      }
      localStorage.setItem('todos', JSON.stringify(todos.value));
      console.log('数据已保存！');
  }
  

  // 这是真正的待完成的列表
  const filterWaiting = computed(() => {
    const rs = todos.value.filter((item) => !item.done) // 将未勾选的过滤出来，留下勾选的
    toDoNum.value = rs.length;
    return rs;
  });

  // 这是真正的已经完成的列表
  const filterDone = computed(() => {
    const rs = todos.value.filter((item) => item.done) // 将勾选的过滤出来，留下未勾选的
    doneNum.value = rs.length;
    return rs;
  });

  // 从localStorage加载数据
  onMounted(() => {
      const savedTodos = localStorage.getItem('todos');
      if (savedTodos) {
          todos.value = JSON.parse(savedTodos);
          toDoNum.value = filterWaiting.value.length;
          doneNum.value = filterDone.value.length;
      }
  });
</script>

<template>
  <main class="container">
      <article>
          <h3>事件清单</h3>
          <input type="text" 
          v-model="newToDo" 
          placeholder="请输入待办事件" 
          aria-invalid="false"
          @keyup.enter="addToDoList()"
          class="input-todo">

          <i>{{ toDoNum }}项</i>
          <details open>
            <summary>待办事项:</summary>
            <fieldset class="todo-list">
              <!-- 做for循环的时候每一个项应该有一个唯一的key -->
              <label for="terms" v-for="item in filterWaiting" :key="item.id" class="todo-item">
                <input type="checkbox" :id="'todo' + item.id.toString()" 
                :name="'todo' + item.id.toString()" v-model="item.done" class="todo-checkbox">
                {{ item.text }}
                <a href="#" role="button" class="delete-button" @click="removeItem(item.id)">x</a>
              </label>
            </fieldset>
          </details>

          <hr/>

          <i>{{ doneNum }}项</i>
          <details open>
            <summary>办结事项:</summary>
            <fieldset class="done-list">
              <label for="terms_sharing" v-for="item in filterDone" :key="item.id" class="done-item">
                <input type="checkbox" :id="'todo' + item.id.toString()" 
                :name="'todo' + item.id.toString()" v-model="item.done" disabled checked class="done-checkbox">
                {{ item.text }}
                <a href="#" role="button" class="delete-button" @click="removeItem(item.id)">x</a>
              </label>
            </fieldset>
          </details>
      </article>
  </main>
</template>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.input-todo {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.todo-list, .done-list {
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background: #f9f9f9;
}

.todo-item, .done-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.todo-checkbox, .done-checkbox {
  margin-right: 10px;
}

.delete-button {
  padding: 0px 5px;
  margin-left: auto;
  font-size: 0.5em;
  color: #ff6b6b;
  text-decoration: none;
}

.delete-button:hover {
  color: #ff4d4d;
}

.todo-item input[type="checkbox"]:checked + span {
  text-decoration: line-through;
  color: #999d9f;
}

.todo-item span, .done-item span {
  flex-grow: 1;
}

i {
  font-size: 14px;
  color: #999d9f;
  display: block;
  text-align: center;
  margin: 10px 0;
}
</style>